<script setup lang="ts">
import { postAdminLoginApi } from '@/apis/modules/admin'
import usePopup from '@/composables/usePopup'
import { CookieHelper } from '@/utils/cookie.helper'
import AuthenticatorDialog from './components/AuthenticatorDialog.vue'

const form = reactive({
  username: '',
  password: '',
  google_verify_code: '',
})
const loading = ref(false)
const router = useRouter()
const route = useRoute()
const appStore = useAppStore()
const rules = {
  username: { required: true, message: '请输入账号' },
  password: { required: true, message: '请输入密码' },
  google_verify_code: { required: true, message: '请输入6位谷歌验证码' },
}
const formRef = ref()
async function handleSubmit(data: any) {
  const error = await formRef.value.validate()
  if (error)
    return
  loading.value = true
  postAdminLoginApi({ ...data.values })
    .then((res) => {
      const token = res.token ?? ''
      appStore.adminInfo = res.admin
      CookieHelper.set(token)
      const redirect = route.query.redirect as string
      const path = redirect || '/'
      router.replace(path)
    })
    .finally(() => {
      loading.value = false
    })
}
const { visible, open } = usePopup()
</script>

<template>
  <div class="sign-in__wrap">
    <div class="flex basis-160 flex-col items-center justify-center bg-white">
      <a-form
        ref="formRef"
        class="sign-in__form"
        :model="form"
        :rules="rules"
        @submit="handleSubmit"
      >
        <h1 class="m-0 pb-4 text-center text-2xl font-bold text-color-1">
          云计算资源管理系统
        </h1>
        <a-form-item
          class="mb-0"
          hide-asterisk
          hide-label
          field="username"
        >
          <a-input
            v-model.trim="form.username"
            placeholder="请输入账号"
          />
        </a-form-item>
        <a-form-item
          class="mb-0"
          hide-label
          hide-asterisk
          field="password"
        >
          <a-input-password
            v-model.trim="form.password"
            :max-length="64"
            placeholder="请输入密码"
          />
        </a-form-item>
        <a-form-item
          v-if="appStore.googleVerify"
          class="mb-0"
          hide-label
          hide-asterisk
          field="google_verify_code"
        >
          <a-input
            v-model.trim="form.google_verify_code"
            placeholder="请输入谷歌验证码"
          />
        </a-form-item>
        <div class="felx pt-4 flex-col!">
          <a-button
            html-type="submit"
            type="primary"
            :loading="loading"
            long
            size="large"
          >
            登录
          </a-button>
          <a-divider
            v-if="appStore.googleVerify"
            orientation="center"
            @click="open"
          >
            <span class="cursor-pointer">如何获取谷歌验证码</span>
          </a-divider>
        </div>
      </a-form>
    </div>
    <authenticator-dialog v-model:visible="visible" />
  </div>
</template>

<style lang="less" scoped>
.sign-in__wrap {
  @apply size-full flex flex items-stretch justify-end bg-cover bg-center bg-no-repeat;
  background-image: url('@/assets/images/sign-in-bg.png');

  .sign-in__form {
    @apply rounded-2xl border-1 bg-white w-90 p-8 space-y-4;
    box-shadow: 0px 20px 50px 0px rgba(16, 130, 78, 0.05);
    :deep(.arco-divider) {
      .arco-divider-text {
        @apply text-xs text-color-3 font-normal;
      }
    }
  }
}
</style>
